<template>
	<view>
		<uni-popup ref="popup" type="bottom" :animation="true" @change="change">
			<view  class="popup_content" >
				<view class="popup_search">
					<view class="search">
						<view class="icon_search"><uni-icons :type="icons[0].type" color="#333333" :size="icons[0].size" /></view>
						<view class="search_input">
							<input v-model="params.inv_code" placeholder-style="font-size:26rpx" placeholder="关键字搜索" value="" />
						</view>
						<view class="icon_search"  ><uni-icons  @click="scanCodeEvent" :type="icons[1].type" color="#333333" :size="icons[1].size" /></view>
					</view>
					<view class="seach_info" @click="seachData">搜索</view>
				</view>	
							
				<view class="popup_box_list">
					<scroll-view  class="scroll-view_H" lower-threshold="50" @scrolltolower="nextPage" :style="'height:'+scrollHeight" scroll-y="true" scroll-left="0">
						<view v-for="(item,index) in dataList" :key="index" @click="selectData(index)" class="scroll-view-item_H" >
							<view class="popup_list_item">
								<view class="item_left">
									<view class="item_left_top">
										<view class="item_title">{{item.cInvName}}</view>
										<!--<view class="item_type">{{item.cInvCode}}</view>-->
									</view>
									<view class="item_left_bottom">
										<view class="left_bottom_box">
											产品型号：{{item.cInvCode}}
										</view>
										<view class="left_bottom_box">
											产品规格：{{item.cInvStd}}
										</view>
									</view>
								</view>
								
								<view class="item_right">
									<uni-icons v-if="selectItem['cInvCode']==item.cInvCode" :type="icons[3].type" color="#910a15" :size="icons[3].size" />
								</view>
							</view>
						</view>
					</scroll-view>
				</view>	
				
				<view class="confirm_box">
					<view style="margin:auto;margin-top: 20rpx; margin-bottom: 20rpx; width: 300rpx; ">
						<button type="default" class="button"  size="mini" style="width:100%;background-color: #910a15;color: #fff; font-size: 30rpx;" @click="confirmSelect()">点击确认</button>				
					</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>
<script>

</script>


<script>
	import {api} from '@/pages/regood/add/libs/api.js';
	var _self;
	export default {
		name: 'selectProductPopup',
		props: {
			show:{type:Boolean,default:false},
			selectInfo:{type:Object,default:{}}
		},
		watch:{
			popupShow(val){
				this.$emit('update:show', val);
				this.popupOpt();
			},
			
			show(val) {
				this.initData();
				this.popupShow = val;
				this.popupOpt();
			},
			
			
			/*selectItem(val){
				this.$emit('update:selectInfo', val);
			},
			
			selectInfo(val) {
				this.selectItem = val;
			}*/
		},
		
		
		data() {
			return {
				params:{
					is_sync:2,
					page: 1,
					pageSize: 20,
				},
		
				selectItem:{},
				dataList:[],
				popupShow:this.show,
				scrollHeight:uni.getSystemInfoSync().windowHeight*0.6+"px",
				icons:[
					{type:"search",size:uni.upx2px(30)},
					{type:"camera",size:uni.upx2px(30)},
					{type:"search",size:uni.upx2px(40)},
					{type:"checkmarkempty",size:uni.upx2px(60)},
				],
				dateNow: new Date().Format("yyyy-MM-dd"),
			}
		},
		
		
		created() {
			_self=this;
		},
		
		methods:{
			nextPage:function(e){
				this.params.page+=1;
				this.initData();
			},
			initData: async function(){
				let productList = await api.u8ProductList(this.params);
				if(this.params.page==1){
					this.dataList=productList;
				}else{
					if(productList.length==0) this.params.page-=1;
					this.dataList.push.apply(this.dataList,productList);
				}

			},
			
			change:function(e) {
				this.popupShow=e.show;
			},
			
			popupOpt:function(show){
				if(this.popupShow){
					this.$refs.popup.open('bottom');
				}else{
					this.$refs.popup.close();
				}
			},
			seachData:function(show){
				this.initData();
			},
			selectData:function(index){
				this.selectItem=this.dataList[index];
			},
			
			
			/**
			* 扫码事件
			*/
			 scanCodeEvent: function(){
				var that = this;
				uni.scanCode({
					success: async function (res) {
						let productList = await api.u8ProductList({"inv_code":res.result,"is_sync":2,"page": 1,"pageSize": 20});
						if(productList&&productList.length>0) _self.selectItem=productList[0];
						_self.confirmSelect();				
					}
				});
			},
			
			confirmSelect:function(){
				if(this.selectItem["cInvCode"]){
					this.$emit('update:selectInfo', this.selectItem);
				}
				this.$refs.popup.close();
			}
			
		}
			

	}
</script>


<style>
	@import 'select-product-popup.css';
</style>
